<template>
  <div class="login">
    <!-- 导航栏 -->
    <hmNavbar title="登录" @back="back"></hmNavbar>
    <!-- 主体 -->
    <div class="main-box">
      <div class="loginTitle">
        <span>您好, 请登录</span>
      </div>
      <!-- 手机号码 -->
      <van-form @submit="login" ref="myform">
        <van-field
          v-model="form.mobile"
          name="mobile"
          type="tel"
          placeholder="请输入手机号"
          :rules="rules.mobile"
          label-width="33px"
        >
          <template #label>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <!-- 验证码 -->
        <div class="code">
          <van-field
            v-model="form.code"
            name="code"
            type="number"
            placeholder="请输入验证码"
            :rules="rules.code"
            label-width="33px"
          >
            <template #label>
              <i class="iconfont iconyanzhengma"></i>
            </template>
          </van-field>
          <!-- <van-button native-type="button">发送验证码</van-button> -->
          <span
            v-if="totalTime === 4"
            class="sendCode"
            native-type="button"
            @click="sendCode"
          >
            发送验证码
          </span>
          <span v-else class="sendCode">{{ totalTime }}秒后获取</span>
        </div>
        <span class="agree"
          >登录即同意<a href="#">《用户使用协议》</a>和<a href="#"
            >《隐私协议》</a
          ></span
        >
        <!-- 提交按钮 -->
        <div class="subBTN">
          <van-button round block native-type="submit" color="#e40137"
            >确定</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 导入接口
import { getCode, login } from '../../api/login.js'
// TOKEN工具
import { setToken } from '../../utils/localStorage.js'
// 导入子组件
// import hmNavbar from '../../components/hmNavbar'
export default {
  name: 'login',
  components: {
    // hmNavbar
  },
  data () {
    return {
      // code开关
      iscode: false,
      // 定时器
      totalTime: 4,
      // 表单内容
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请填写手机号码', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '请填写验证码', trigger: 'onBlur' },
          {
            pattern: /^\d{4}$/,
            message: '验证码为 4 位数',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    back () {
      this.$router.push('/company')
    },
    async sendCode () {
      // 发起请求
      this.$refs.myform.validate(['mobile']).then(() => {
        this.totalTime--
      })
      this.$toast.loading('发送中')
      this.$refs.myform
        .validate(['mobile'])
        .then(async () => {
          // 验证成功后发起 请求 开启定时器
          const interval = await setInterval(() => {
            this.totalTime--
            if (this.totalTime === 0) {
              clearInterval(interval)
              this.totalTime = 4
            }
          }, 1000)
          // try
          try {
            const res = await getCode(this.form.mobile)
            this.$toast.success(res.data)
          } catch {
            console.log('服务器出错')
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast.fail('手机号码有误')
        })
    },
    // 登录时候发起的请求
    async login () {
      console.log(123)
      this.$toast.loading('加载中')
      // 发起请求
      // try中包裹有可能出错的代码
      try {
        const res = await login({
          ...this.form
        })
        // 存储TOKEN
        setToken(res.data.jwt)
        this.$toast({
          type: 'success',
          message: res.message
          // duration: 0
        })
        // 储存到Store
        this.$store.commit('setUser', res.data.user)
        this.$store.commit('setLogin', true)
        // 跳转
        const redirect = this.$route.query.redirect
        console.log(redirect)
        if (redirect) {
          this.$router.push(redirect)
        } else {
          this.$router.push('/home')
        }
      } catch {
        // 如果有问题 catch中的代码才会执行
        console.log('服务器出错')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .main-box {
    padding: 0 15px;
    .van-cell {
      padding-left: 20px;
    }

    .loginTitle {
      // margin-left: 15px;
      margin-top: 50px;
      margin-bottom: 40px;
      span {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Semibold;
        color: #222222;
        font-weight: bold;
      }
    }
    .code {
      display: flex;
      .sendCode {
        width: 120px;
        line-height: 48px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #00b8d4;
      }
    }
    .subBTN {
      margin-top: 44px;
      .van-button__text {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
      }
    }
    .agree {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: #181a39;
      a {
        color: #00b8d4;
      }
    }
  }
}
</style>
